<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <!-- 引入分层的css文件 -->
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/base.css" />
  <link rel="stylesheet" type="text/css" href="css/header.css" />
  <link rel="stylesheet" type="text/css" href="css/second-nav.css" />
  <link rel="stylesheet" type="text/css" href="css/content.css" />
  <link rel="stylesheet" type="text/css" href="css/indexMain.css" />
  <link rel="stylesheet" type="text/css" href="css/small-ad.css" />
  <link rel="stylesheet" type="text/css" href="css/big-ad.css" />

  <link rel="stylesheet" type="text/css" href="css/hotRecruit.css" />
  <link rel="stylesheet" type="text/css" href="css/hotCompany.css" />
  <link rel="stylesheet" type="text/css" href="css/hotLinks.css" />
  <link rel="stylesheet" type="text/css" href="css/footer.css" />
  <link rel="stylesheet" type="text/css" href="css/copyright.css" />
  <link rel="stylesheet" type="text/css" href="css/backtop.css" />
</head>

<body>
  <!-- header 区域开始 -->
  <div class="header">
    <div class="inner-c header-c">
      <!-- header的左侧 -->
      <div class="header-left">
        <ul class="nav">
          <li><a href="index.html">魅族官网 </a></li>
          <li><a href="company.html"> 魅族商城</a></li>
          <li><a href="school.html">Flyme</a></li>
          <li><a href="#">专卖店</a></li>
          <li><a href="#">服务</a></li>
          <li><a href="#">社区</a></li>
          <li><a href="#">课程 </a></li>
        </ul>
      </div>
      <!-- header的右侧 -->
      <div class="header-right">
        <a href="#" class="favorite">我的收藏<span class="tips">new</span> </a>
        <a href="#" class="order"> 我的订单</a>
        <a href="#" class="login">登录</a>
        <a href="#" class="register ">注册</a>
        </ul>
      </div>
    </div>
  </div>
  <!-- header 区域结束 -->
  <!-- second nav开始 -->
  <div class="second-nav">
    <div class="inner-c second-c">
      <!-- logo区域 -->
      <h1 class="logo">
        <a href="index.html"></a>
      </h1>
      <!-- 导航区域 -->
      <ul class="second-nav-right">
        <li><a href="#">PRO手机</a></li>
        <li><a href="#">魅蓝手机</a></li>
        <li><a href="#">MX手机</a></li>
        <li><a href="#">精选配件</a></li>
        <li><a href="#">智能硬件</a></li>
        </li>
      </ul>
    </div>
  </div>
  <!-- second nav结束 -->

  <!-- 主要内容 content 区域开始 -->
  <div class="content">
    <div class="inner-c">
      <!-- main 区域开始 -->
      <div class="main">
        <div class="banner">
          <ul>
            <li>
              <a href=""><img src="images/banner.jpg" alt="" /></a>
            </li>
            <li>
              <a href=""><img src="images/banner.jpg" alt="" /></a>
            </li>
            <li>
              <a href=""><img src="images/banner.jpg" alt="" /></a>
            </li>
            <li>
              <a href=""><img src="images/banner.jpg" alt="" /></a>
            </li>
            <li>
              <a href=""><img src="images/banner.jpg" alt="" /></a>
            </li>
            <li>
              <a href=""><img src="images/banner.jpg" alt="" /></a>
            </li>
          </ul>
          <div class="btn">
            <span class="left-btn"></span>
            <span class="right-btn"></span>
          </div>
          <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </div>
        <div class="aside">
          <ul class="classify">
            <li>
              <a href="">全部商品分类</a>
            </li>
            <li><a href="">手机</a></li>
            <li><a href="">智能硬件</a></li>
            <li><a href="">耳机 / 音箱</a></li>
            <li><a href="">路由器 / 移动电源</a></li>
            <li><a href="">保护套 / 后盖 / 贴膜</a></li>
            <li><a href="">数据线 / 电源适配器</a></li>
            <li><a href="">周边配件</a></li>
            <li></li>
          </ul>
        </div>
      </div>
      <!-- main区域结束 -->
    </div>
  </div>
  <!-- 主要内容 content 区域结束 -->
  <!-- 小广告区域 开始 -->
  <div class="small-ad">
    <div class="inner-c small-ad-c">
      <div class="small-ad-complex">
        <div class="small-square">
          <p class="complex-logo">
            <a href="#">
              <img src="images/1450855246-61162.png" alt="" />
              <span>M码通道</span>
            </a>
          </p>
        </div>
        <div class="small-square">
          <p class="complex-logo">
            <a href="#">
              <img src="images/1450855279-64872.png" alt="" />
              <span>以旧换新</span>
            </a>
          </p>
        </div>
        <div class="small-square">
          <p class="complex-logo">
            <a href="#">
              <img src="images/1450855198-58056.png" alt="" />
              <span>魅族意外保</span>
            </a>
          </p>
        </div>
        <div class="small-square">
          <p class="complex-logo">
            <a href="#">
              <img src="images/1451960447-93534.png" alt="" />
              <span>回购单查询</span>
            </a>
          </p>
        </div>
      </div>
      <div class="small-ad-complex small-ad-else">
        <div class="small-square-img">
          <a href="#" class="complex-img">
            <img src="images/1469442560-64371.jpg" alt="" />
          </a>
        </div>
      </div>
      <div class="small-ad-complex small-ad-else">
        <div class="small-square-img">
          <p class="complex-img">
            <a href="#">
              <img src="images/Cix_s1fuEgmAc5NwAABEl576SHY123.jpg" alt="" />
            </a>
          </p>
        </div>
      </div>
      <div class="small-ad-complex small-ad-else">
        <div class="small-square-img">
          <p class="complex-img">
            <a href="#">
              <img src="images/CnQOjVfhDa2AKtdyAAAtKjihE5E114.jpg" alt="" />
            </a>
          </p>
        </div>
      </div>
      <div class="small-ad-complex small-ad-else">
        <div class="small-square-img">
          <p class="complex-img">
            <a href="#">
              <img src="images/Cix_s1f66-eAGausAABXAszHWuE990.png" alt="" />
            </a>
          </p>
        </div>
      </div>

    </div>
  </div>
  <!-- 小广告区域 结束 -->
  <!-- 大广告区域 开始 -->
  <div class="big-ad">
    <div class="big-ad-title inner-c">
      <p><a href="#">手机</a></p>
      <span class="show-or-close">展开 <i></i></span>
    </div>
    <div class="big-ad-complex inner-c">
      <div class="big-square">
        <p class="model-img">
          <a href="#">
            <img src="images/CnQOjVf6EfOAKlj2AAvhVMfnh40856_180x180.png" alt="" />
            <span class="tips">热卖</span>
          </a>

        </p>
        <div class="Copywriting">
          <a href="#" class="model">魅蓝note3</a>
          <a href="#" class="model-sale-time">11日-12日 限量开售</a>
          <a href="#" class="mode-price">￥ 799</a>
        </div>
      </div>
      <div class="big-square">
        <p class="model-img">
          <a href="#">
            <img src="images/CnQOjVf8Qm2AGJwmAAf5c4NUNpI085_180x180.png" alt="" />
          </a>

        </p>
        <div class="Copywriting">
          <a href="#" class="model">魅蓝note3</a>
          <a href="#" class="model-sale-time">11日-12日 限量开售</a>
          <a href="#" class="mode-price">￥ 799</a>
        </div>
      </div>
      <div class="big-square">
        <p class="model-img">
          <a href="#">
            <img src="images/CnQOjVffSHOAaRkmAA0Rkx2XjKE222_180x180.png" alt="" />
          </a>

        </p>
        <div class="Copywriting">
          <a href="#" class="model">魅蓝note3</a>
          <a href="#" class="model-sale-time">11日-12日 限量开售</a>
          <a href="#" class="mode-price">￥ 799</a>
        </div>
      </div>
      <div class="big-square">
        <p class="model-img">
          <a href="#">
            <img src="images/CnQOjVf6EfOAKlj2AAvhVMfnh40856_180x180.png" alt="" />
          </a>

        </p>
        <div class="Copywriting">
          <a href="#" class="model">魅蓝note3</a>
          <a href="#" class="model-sale-time">11日-12日 限量开售</a>
          <a href="#" class="mode-price">￥ 799</a>
        </div>
      </div>
      <div class="big-square">
        <p class="model-img">
          <a href="#">
            <img src="images/CnQOjVf6EfOAKlj2AAvhVMfnh40856_180x180.png" alt="" />
          </a>

        </p>
        <div class="Copywriting">
          <a href="#" class="model">魅蓝note3</a>
          <a href="#" class="model-sale-time">11日-12日 限量开售</a>
          <a href="#" class="mode-price">￥ 799</a>
        </div>
      </div>
    </div>
  </div>
  <!-- 大广告区域 结束 -->
  <!-- footer区域开始 -->
  <div class="footer">
    <div class="inner-c footer-c">
      <div class="service">
        <dl>
          <dt>帮助说明</dt>
          <dd>
            <a href="">支付方式</a>
            <a href="">配送说明</a>
            <a href="">售后服务</a>
            <a href="">付款帮助</a>
          </dd>
        </dl>
        <dl>
          <dt>Flyme</dt>
          <dd>
            <a href="">开放平台</a>
            <a href="">固件下载</a>
            <a href="">软件商店</a>
            <a href="">查找手机</a>
          </dd>
        </dl>
        <dl>
          <dt>关于我们</dt>
          <dd>
            <a href="">关于魅族</a>
            <a href="">加入我们</a>
            <a href="">联系我们</a>
            <a href="">法律声明</a>
          </dd>
        </dl>
        <dl>
          <dt>关注我们</dt>
          <dd>
            <a href="">新浪微博</a>
            <a href="">腾讯微博</a>
            <a href="">QQ空间</a>
            <a href="">官方微信</a>
          </dd>
        </dl>
        <dl>
          <dd class="weird">
            <a href="">24小时全国服务热线</a>
            <a href="">400-788-3333</a>
            <a href=""><i></i><span>24小时在线客服</span></a>
          </dd>
        </dl>
      </div>
    </div>
  </div>
  <!-- copyright区域开始 -->
  <div class="copyright">
    <div class="inner-c copyright-c">
      <div class="copyright-detail">
        <span class="copyright-title"> ©2016 Meizu Telecom Equipment Co., Ltd. All rights reserved. </span>
        <a href="#" class="anbei">备案号：粤ICP备13003602号-2</a>
        <a href="#" class="jingying">经营许可证编号：粤B2-20130198</a>
        <a href="#" class="copyright-icon"><span>营业执照</span><i></i><i></i><i></i></a>
      </div>
    </div>
  </div>
  <!-- copyright区域结束 -->
</body>

</html>